记录一下springboot+vue前后端分离实现的excel内容查询导出功能 |
您所在的位置：网站首页 › springboot vue 前后端不分离 › 记录一下springboot+vue前后端分离实现的excel内容查询导出功能 |
记录一下springboot+vue前后端分离实现的excel内容查询导出功能
|
文章目录前言一、引入apache.poi相关依赖二、vue通过事件点击发送get请求1.发送请求2.后端接收请求3.ExcelUtil工具类4.返回的格式三、vue前端使用blob处理文件流1.处理文件流并下载excel文件2.如果第一步完成后下载的excel文件打不开，编码后打开乱码形式就可以继续往下，当然第一步完成没问题就不需要看了总结
前言
文件导出功能是一种常态，大多数网站开发来说都会有各种形式的导出功能，以往使用ssm前后端不开的框架直接向后端发送一个请求，然后后端直接使用文件流的形式就可以实现下载功能，前端的操作就是一个请求而已。 就目前来说，传统的前后端不分离的框架在企业中用的是越来越少了，基本上都是前后端分离项目，而前后端分离项目的导出功能再也不是前端只发送一个请求那么简单了，后端的文件流将不会自动下载，而在前端获取到文件流后在前端使用其他的方式去下载。本文将讲解springboot+vue前后端分离项目的导出功能. 一、引入apache.poi相关依赖这里我们使用原生apache的excel模板相关功能，所有我们需要导入相关依赖。pom引入 org.apache.poi poi 4.1.0 org.apache.poi poi-ooxml 4.1.0 commons-io commons-io 2.4引入后等待maven自动下载对应依赖。 二、vue通过事件点击发送get请求 1.发送请求下面是我的相关代码部分：
按钮点击事件：
这里的请求格式不能错误，我们需要获取的是blob对象，然后通过对象去下载数据。必须：responseType:'blob’ 2.后端接收请求代码如下（示例）： //controller @GetMapping("excelExport") public void excelExport(String organs,HttpServletRequest request,HttpServletResponse response){ dreamContainSearch.excelExport(organs,request,response); } //实现类 @Override public void excelExport(String organs,HttpServletRequest request, HttpServletResponse response) { String sheetTitle = "测试导出数据"; String [] title = new String[]{"id","no","标注标签","标注子标签"}; String [] properties = new String[]{"id","no","organs","organsdetails"}; // 查询对应的字段 List maps = dreamContainMapper.getExcelDatas(organs); ExcelUtil excelExport = new ExcelUtil(); //内容集合 excelExport.setData(maps); //excel内容字段 excelExport.setHeardKey(properties); //字体 excelExport.setFontSize(14); //标题 excelExport.setTitle(sheetTitle); //excel的sheet也名称 excelExport.setSheetName(sheetTitle); //表头的一行内容 excelExport.setHeardList(title); try { excelExport.exportExport(request, response); }catch (Exception e){ log.info("数据导出失败"); e.printStackTrace(); } } 3.ExcelUtil工具类工具类实现的是简单的excel表格 package com.hfmxs.mxdream.utils; import com.google.common.base.Strings; import org.apache.poi.hssf.usermodel.*; import org.apache.poi.ss.usermodel.HorizontalAlignment; import org.apache.poi.ss.usermodel.VerticalAlignment; import org.apache.poi.ss.util.CellRangeAddress; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.OutputStream; import java.util.List; import java.util.Map; public class ExcelUtil { //表头 private String title; //各个列的表头 private String[] heardList; //各个列的元素key值 private String[] heardKey; //需要填充的数据信息 private List data; //字体大小 private int fontSize = 14; //行高 private int rowHeight = 30; //列宽 private int columWidth = 150; //工作表 private String sheetName = "sheet1"; public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String[] getHeardList() { return heardList; } public void setHeardList(String[] heardList) { this.heardList = heardList; } public String[] getHeardKey() { return heardKey; } public void setHeardKey(String[] heardKey) { this.heardKey = heardKey; } public List getData() { return data; } public void setData(List data) { this.data = data; } public int getFontSize() { return fontSize; } public void setFontSize(int fontSize) { this.fontSize = fontSize; } public int getRowHeight() { return rowHeight; } public void setRowHeight(int rowHeight) { this.rowHeight = rowHeight; } public int getColumWidth() { return columWidth; } public void setColumWidth(int columWidth) { this.columWidth = columWidth; } public String getSheetName() { return sheetName; } public void setSheetName(String sheetName) { this.sheetName = sheetName; } /** * 开始导出数据信息 * */ public byte[] exportExport(HttpServletRequest request, HttpServletResponse response) throws IOException { //检查参数配置信息 checkConfig(); //创建工作簿 HSSFWorkbook wb = new HSSFWorkbook(); //创建工作表 HSSFSheet wbSheet = wb.createSheet(this.sheetName); //设置默认行宽 wbSheet.setDefaultColumnWidth(20); // 标题样式（加粗，垂直居中） HSSFCellStyle cellStyle = wb.createCellStyle(); cellStyle.setAlignment(HorizontalAlignment.CENTER);//水平居中 cellStyle.setVerticalAlignment(VerticalAlignment.CENTER);//垂直居中 HSSFFont fontStyle = wb.createFont(); fontStyle.setBold(false); //加粗 fontStyle.setFontHeightInPoints((short)14); //设置标题字体大小 cellStyle.setFont(fontStyle); //在第0行创建rows (表标题) HSSFRow title = wbSheet.createRow((int) 0); title.setHeightInPoints(30);//行高 HSSFCell cellValue = title.createCell(0); cellValue.setCellValue(this.title); cellValue.setCellStyle(cellStyle); wbSheet.addMergedRegion(new CellRangeAddress(0,0,0,(this.heardList.length-1))); //设置表头样式，表头居中 HSSFCellStyle style = wb.createCellStyle(); //在第1行创建rows HSSFRow row = wbSheet.createRow((int) 1); //设置列头元素 HSSFCell cellHead = null; for (int i = 0; i |
事件触发调用api接口：
对应的接口路径：
封装好的axios请求：
【本文地址】
今日新闻 |
推荐新闻 |